<template>
	<div id="BroilerStockHistogram"></div>
</template>

<script setup="BroilerStockHistogram">
import { ref, onMounted } from 'vue'
import { Column } from '@antv/g2plot'
import BizEggStocksApi from "@/api/egg_stoke/bizEggStocksApi";
import BizBroilerStocksApi from "@/api/broiler_stoke/bizBroilerStocksApi";

let BroilerStockData = ref([])

onMounted(() => {
	BizBroilerStocksApi.getBroilerStockInfo(null)
		.then(resp => {
			BroilerStockData.value = resp.map(obj => ({
				type: obj.type,
				totalWeight: obj.totalWeight
			}))
			draw()
		})
		.catch(resp => {
			console.log(resp)
		})
})

const draw = () => {
	const columnPlot = new Column('BroilerStockHistogram', {
		data: BroilerStockData.value, // 使用响应式引用作为数据源
		xField: 'type',
		yField: 'totalWeight',
		label: {
			position: 'middle', // 'top', 'bottom', 'middle',
			style: {
				fill: '#FFFFFF',
				opacity: 0.6
			}
		},
		xAxis: {
			label: {
				autoHide: true,
				autoRotate: false
			}
		},
		meta: {
			type: {
				alias: '类别'
			},
			totalWeight: {
				alias: '库存量'
			}
		}
	})
	columnPlot.render()
}
</script>
